<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .progress {
        border: solid;
        padding: 5px;
      }
      .progress .bar {
        height: 10px;
        width: 0px;
        background: green;
      }
    </style>
  </head>
  <body>
    <div id="msg"></div>
    <input id="file" type="file" />
    <button id="uploadBtn">上传</button>
    <img width="200px" id="thumbImg" src="" alt="" />

    <video src="" width="200px" id="thumbVideo"></video>

    <div class="progress">
      <div class="bar" id="progress"></div>
    </div>
    <script>
      // 获取上传文件
      const uploadBtn = document.getElementById("uploadBtn");
      const fileInput = document.getElementById("file");

      fileInput.onchange = function () {
        const file = fileInput.files[0];
        if (file === undefined) return;

        // 限制文件大小，1024字节=1k 1024k=1M
        const allowSize = 1;
        if (file.size > allowSize * 1024 * 1024) {
          msg.innerHTML = `文件大小不能超过${allowSize}M`;
          return;
        }
        // 限制文件格式
        const allowExt = ["jpg", "png", "mp4"];
        const ext = file.name.split(".").slice(-1)[0]; //获取后缀名
        if (allowExt.includes(ext) === false) {
          msg.innerHTML = `允许上传的文件类型由${allowExt.join()}`;
          return;
        }

        msg.innerHTML = "";

        // 过滤下，只有图片类型下面代码才执行
        const type = file.type.split("/")[0];
        const thumbSrc = URL.createObjectURL(file);
        if (type === "image") {
          thumbImg.src = thumbSrc;
        } else {
          thumbImg.src = "";
        }
        if (type === "video") {
          thumbVideo.src = thumbSrc;
        } else {
          thumbVideo.src = "";
        }
      };

      uploadBtn.onclick = function () {
        // 判断文件是否存在
        const file = fileInput.files[0];
        if (file === undefined) return;

        // 限制文件大小，1024字节=1k 1024k=1M
        const allowSize = 1;
        if (file.size > allowSize * 1024 * 1024) {
          msg.innerHTML = `文件大小不能超过${allowSize}M`;
          return;
        }
        // 限制文件格式
        const allowExt = ["jpg", "png", "mp4"];
        const ext = file.name.split(".").slice(-1)[0]; //获取后缀名
        if (allowExt.includes(ext) === false) {
          msg.innerHTML = `允许上传的文件类型由${allowExt.join()}`;
          return;
        }

        msg.innerHTML = "";
        // 上传服务器
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "http://localhost:3008/upload");

        xhr.onload = function () {
          console.log(xhr.response);
        };

        // 上传进度事件
        xhr.upload.onprogress = function (e) {
          progress.style.width = (e.loaded / e.total) * 100 + "%";
        };

        const fd = new FormData();
        fd.append("username", "jack");
        fd.append("password", "123123");
        fd.append("file", file);
        xhr.send(fd);
      };
    </script>
  </body>
</html>
